import * as React from "react";
import "./index.scss";
import Textarea from "react-textarea-autosize";
import formcontext from '../form';
import Required from "../Required";

export default props => {
  const form = React.useContext(formcontext);
  const key = props["data-key"];
  const { node } = props;
  const t = React.useRef({});
  const { getFieldDecorator } = form;

  React.useEffect(() => {
    const data = form.getFieldInstance(key);
    t.current = data;
  });

  const value = form.getFieldValue(key);
  const labelText = node.data.label;
  const { placeholder, required } = node.data;
  return (
    <div
      data-key={key}
      style={{
        ...props.style,
        paddingTop: "10px",
        paddingBottom: "10px",
        borderBottom: "1px solid #E6E6E6",
      }}
    >
      <div style={{ position: "relative" }}>
        {getFieldDecorator(node.data.column)(
          <Textarea
            minRows={2}
            style={{
              minWidth: "70vw",
              width: "100%",
            }}
            disabled={props.disabled}
          />
        )}
        <div
          style={{
            position: "absolute",
            top: 0,
          }}
          onClick={() => {
            t.current.focus();
          }}
          className={value ? "hidden" : "costumlabel"}
        >
          <label>
            {labelText || "文本标签"}:{required ? <Required /> : null}
          </label>
          <span style={{ color: "#888888" }}>{placeholder}</span>
        </div>
      </div>
    </div>
  );
};
